import React, { memo } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Pagination } from 'antd';

import { PaginationWrapper } from './style';

import { fetchRoomListAction } from 'src/store/modules/entire/createActions';


const EntirePagination = memo(() => {
  // const [current, setCurrent] = useState(1);

  const currentPage = useSelector((state) => state.entire.currentPage);
  const totalCount = useSelector((state) => state.entire.totalCount);
  const roomList = useSelector((state) => state.entire.roomList);

  // 事件处理的逻辑
  const dispatch = useDispatch();
  const onCurrentPageChange = (pageCount) => {
    // 回到顶部
    window.scrollTo(0,0)
    // console.log(pageCount);
    // 更新最新的页码  redux => currentPage
    // dispatch(changeCurrentPageAction(pageCount - 1))
    dispatch(fetchRoomListAction(pageCount - 1));
  };
  // 小算法
  const startCount = currentPage * 20 + 1;
  const endCount = (currentPage + 1) * 20;

  return (
    <PaginationWrapper>
      {!!roomList.length && (
        <div className="info">
          <Pagination
            align="center"
            defaultCurrent={1}
            pageSize={20}
            total={totalCount}
            onChange={(e) => onCurrentPageChange(e)}
            showSizeChanger={false}
          />
          <div className="desc">
            第{startCount}-{endCount}个房源，共超过{totalCount}个
          </div>
        </div>
      )}
    </PaginationWrapper>
  );
});

export default EntirePagination;
